<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--<link rel="shortcut icon" href="titleLogo.png" type="image/x-icon">-->
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" href="../../css/pulice.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper-3.4.2.min.css">
    <script src="../../js/common.js"></script>
    <style>
        #ads img{width: 100%;height: 10rem;}
        .aui-grid .aui-badge{position:  absolute; top: .8rem; left: 58%; z-index: 99;}
        .news{ padding: .35rem 0.5rem; background: #f5f5f5; line-height: 1; height: auto;}
        .news > div{overflow: hidden;padding: 0 0.5rem;background: #fff;border-radius: 1rem;display: flex;line-height: 1.4rem;height: 1.4rem;font-size: 0.55rem}
        .news .newsTit img{width: 1.6rem; display: inline-block; vertical-align: middle; position: relative; top: -2px;}
        .news .newsTit{padding-right:0.4rem;border-right:1px solid #ccc;margin: 0.4rem 0;margin-right:0.55rem; line-height: 1;}
        .news .newsMore{padding-left: 0.5rem; border-left: 1px solid #ccc; margin: 0.4rem 0; line-height: 1;}
        .news .newsCont{display: flex;flex: 1;}
        .news .newsCont > :first-child{color:red;margin-right: 0.35rem;}
        .news .swiper-container{flex:1}
        .news .swiper-slide{width: 95%;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}
        .news a{color: #333;}
        .hmzy{padding: 0 0.5rem 0.5rem;}
        .hmzy-title{font-size: 0.7rem;color:#333;padding:0.75rem 0}
        .hmzy-box > img{width:5.7rem;align-self: center}
        .hmzy-box{display: flex}
        .hmzy-other{display: flex;flex-wrap: wrap;align-self: center;}
        .hmzy-other img{height: 3.3rem;}
        .hmzy-other > :first-child{height: 4rem;border-bottom: 1px solid #ccc;}
        .hmzy-other > :nth-last-child(1),.hmzy-other :nth-last-child(2){width: 50%}
        .hmzy-other > :nth-last-child(1){width: 50%;border-left: 1px solid #ccc;}
        .cnxh{background:#f5f5f5;}
        .cnxh-tit{padding:.5rem}
        .cnxh-tit img{width:4.6rem;height: 0.95rem;margin:auto}
        .cnxh-item{display: flex;justify-content: space-between;flex-wrap:wrap}
        .cnxh-item .cnxh-list{width: 49%;background:#fff;padding-bottom: 0.7rem;margin-bottom: 0.5rem;}
        .cnxh-item .cnxh-list img{width: 100%; height: 6.2rem;}
        .cnxh-list-name{margin-top: .25rem;padding: 0 0.55rem;font-size: 0.45rem;line-height: 1.8;width: 100%; height: 1.8rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: block-axis; -webkit-line-clamp: 2;}
        .cnxh-list-name .ziying{font-style:normal;padding: .1rem;background: red;color:#fff;border-radius:4px;font-size:0.45rem}
        .cnxh-list-money{padding:0 0.55rem;color:#ef0b21;font-size: 0.75rem;line-height: 1;margin-top: 0.25rem}
        .loading{text-align: center;}
        .loading img{width:1rem;height:1rem;display:inline-block;vertical-align:middle;position:relative;top:-3px;}
        .contNav a{color:#333}
        .sreach-result{position:fixed;top:2.2rem;left:0;bottom:0;background:#f5f5f5;z-index:10000;right:0;overflow-y:scroll;display: none;}
        .sreach-result .cnxh{border-top: 0.5rem solid #f5f5f5;padding-bottom: .25rem;}
    </style>
    <script src="../../js/libs/zepto.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/libs/swiper.min.js"></script>
    <script>
        // const SURL = "http://192.144.135.180/"; // 接口
        // const imgUrl = "http://zzhtwl.oss-cn-qingdao.aliyuncs.com/"; // 图片地址

        var indexOne = 1,
            indexTwo = 1,
            indexMaxPage,
            statusb = true,
            val = '';

        $(function () {
            // vue实例
            var app = new Vue({
                el: '#app',
                data: {
                    news: [],  // 新闻公告
                    ads: [],   // 广告图
                    goods: [], // 猜你喜欢
                    result: [] // 搜索结果
                },
                updated: function () {
                    this.$nextTick(function () {
                        var ads = new Swiper('#ads', {
                            autoplay: 5000,
                            pagination : '.swiper-pagination',
                            loop : true,
                        });
                        var news = new Swiper('#news', {
                            autoplay: 3500,
                            direction : 'vertical',
                            loop : true,
                        });
                    });
                }
            });

            // 头、尾公共部分引入
            $('.hm-bar').load('../../data/headerIndex.html', function () {
                $(this).find('.messageBox').find('span').css('color', 'blue');
                $(this).find('.sreachBox').find('input').on('input', function () {
                    val = $(this).val();
                    if (val != '') {
                        $('.sreach-result').show();
                        $('body').css('overflow','hidden');
                    }else {
                        $('.sreach-result').hide();
                        $('body').css('overflow','visible');
                    }
                    searchResult(SURL,val,indexTwo);
                });
            });
            $('.footer').load('../../data/footer.html');

            // 上拉猜你喜欢更新
            $(document).scroll(function () {
                var sm = $(window).scrollTop() + $(window).height();
                var dsm = $(document).height();
                if(sm >= dsm){
                    if (statusb == true) {
                        statusb = false;
                        indexOne+=1;
                        if (!indexMaxPage || indexOne <= indexMaxPage) {
                            $.ajax({
                                url: SURL+'app/Goods/goods',
                                data: {
                                    "pageIndex": indexOne
                                },
                                success: function (data) {
                                    $.each(data.data.maps, function (i) {
                                        app.goods.push(data.data.maps[i]);
                                        if (i == data.data.maps.length-1) {
                                            statusb = true;
                                        }
                                    });
                                    indexMaxPage = data.data.tatolPage;
                                    $('.loading').find('span').text('上拉加载更多');
                                }
                            });
                        }
                    }
                }
            });

            // 搜索结果滚动
            $('.sreach-result').scroll(function () {
                var vBot = $(this).scrollTop() + $(this).height();
                var wBot = $(this).find('.cnxh').height();
                if (vBot >= wBot) {
                    searchResult(SURL, val, indexTwo, "add");
                    indexTwo += 1;
                }
            });

            // 公司新闻模块
            $.ajax({
                url: SURL+"app/article/companyNew",
                data: {
                    "page":"1",
                    "pageSize":"5",
                },
                success: function(data) {
                    $.each(data.data.maps,function (i) {
                        app.news.push(data.data.maps[i]);
                    });
                }
            });

            // 首页内容获取
            $.ajax({
                url: SURL+"app/site/home",
                data: {},
                success: function(data) {
                    $.each(data.data.ads,function (i) {
                        app.ads.push(data.data.ads[i]);
                        console.log(data);
                    });
                    $.each(data.data.goods,function (i) {
                        app.goods.push(data.data.goods[i]);
                    });
                }
            });

            // 自营连接
            $('.hmzy-href1').on('tap', function (event) {
                event.preventDefault();
                sessionStorage.setItem('listType','1');
                window.location.href='goodsList.html';

            });
            $('.hmzy-href2').on('tap', function (event) {
                event.preventDefault();
                sessionStorage.setItem('listType','2');
                window.location.href='goodsList.html';

            });
            $('.hmzy-href3').on('tap', function (event) {
                event.preventDefault();
                sessionStorage.setItem('listType','3');
                window.location.href='goodsList.html';
            });


            // ajax全局事件
            $(document).on('ajaxStart', function(){
                $('.loading').find('span').text('加载中...');
            });

            // 共用的方法
            function searchResult(SURL,val,indexTwo,str) {
                if (str == 'input') app.result = [];

                if (!indexMaxPage || indexTwo <= indexMaxPage) {
                    $.ajax({
                        url: SURL + 'app/Goods/searchGoods',
                        data: {
                            goodsName: val,
                            pageIndex: indexTwo
                        },
                        success: function (data) {
                            $.each(data.data.maps, function (i) {
                                app.result.push(data.data.maps[i]);
                            });
                            indexMaxPage = data.data.tatolPage;
                            if (indexTwo >= indexMaxPage) {
                                $('.loading').find('span').text('没有更多了');
                            }else {
                                $('.loading').find('span').text('上拉加载更多')
                            }
                            $('.hm-bar').find('input').blur();
                        }
                    })
                }
            }

            //点击跳转详情

            function goDetail (id) {
                location.href='../productDetail/detail.html?goodsId='+id
            }
        })
    </script>
    <title>华猫首页</title>
</head>
<body>
    <div id="app">
        <header class="hm-bar"></header>

        <div id="ads" class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item2 in ads">
                    <img :src="orImg(item2.adFile)" alt="" />
                </div>
                <!--<div class="swiper-slide">恭喜华猫商城上线！！！</div>-->
                <!--<div class="swiper-slide">恭喜华猫商城上线！！！</div>-->
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <section class="aui-grid aui-margin-b-15">
            <div class="contNav">
                <div class="aui-row">
                    <div class="aui-col-xs-3">
                        <!--<div class="aui-badge">88</div>-->
                        <div class="img-size">
                            <img src="../../img/tjspIcon.png" alt="">
                        </div>
                        <div class="aui-grid-label">推荐商品</div>
                    </div>
                    <div class="aui-col-xs-3">
                        <a href="../index/goodsList.html">
                            <!--<div class="aui-badge">88</div>-->
                            <div class="img-size">
                                <img src="../../img/zyzqIcon.png" alt="">
                            </div>
                            <div class="aui-grid-label">自营专区</div>
                        </a>
                    </div>
                    <div class="aui-col-xs-3">
                        <a href="../alliance/index.html">
                            <!--<div class="aui-badge">88</div>-->
                            <div class="img-size">
                                <img src="../../img/lmsjIcon.png" alt="">
                            </div>
                            <div class="aui-grid-label">联盟商家</div>
                        </a>
                    </div>
                    <div class="aui-col-xs-3">
                        <a href="../workOrder/jiLu.html">
                            <!--<div class="aui-badge">88</div>-->
                            <div class="img-size">
                                <img src="../../img/gdIcon.png" alt="">
                            </div>
                            <div class="aui-grid-label">工单</div>
                        </a>
                    </div>
                </div>
                <div class="aui-row">
                    <div class="aui-col-xs-3">
                        <a href="../orderSet/orderPay.html">
                            <!--<div class="aui-badge">88</div>-->
                            <div class="img-size">
                                <img src="../../img/dmfIcon.png" alt="">
                            </div>
                            <div class="aui-grid-label">当面付</div>
                        </a>
                    </div>
                    <div class="aui-col-xs-3">
                        <a href="../news/companyNews.html">
                            <!--<div class="aui-badge">88</div>-->
                            <div class="img-size">
                                <img src="../../img/gsxwIcon.png" alt="">
                            </div>
                            <div class="aui-grid-label">公司新闻</div>
                        </a>
                    </div>
                    <div class="aui-col-xs-3">
                        <!--<div class="aui-badge">88</div>-->
                        <div class="img-size">
                            <img src="../../img/wyfxIcon.png" alt="">
                        </div>
                        <div class="aui-grid-label">我要分享</div>
                    </div>
                    <div class="aui-col-xs-3">
                        <a href="../userCenter/userMore.html">
                            <!--<div class="aui-badge">88</div>-->
                            <div class="img-size">
                                <img src="../../img/gdIcon2.png" alt="">
                            </div>
                            <div class="aui-grid-label">更多</div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="news">
                <div>
                    <div class="newsTit">
                        华猫
                        <img src="../../img/newsIcon.png" alt=""/>
                    </div>
                    <div class="newsCont">
                        <div>HOT</div>
                        <div id="news" class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="item in news"><a :href="'../news/newsDetails.html?articleId='+item.articleId">{{item.articleTitle}}</a></div>
                                <!--<div class="swiper-slide">恭喜华猫商城上线！！！</div>-->
                                <!--<div class="swiper-slide">恭喜华猫商城上线！！！</div>-->
                            </div>
                        </div>
                    </div>
                    <div class="newsMore">
                        <a href="../news/companyNews.html">更多</a>
                    </div>
                </div>
            </div>
            <div class="hmzy">
                <div class="hmzy-title">华猫官方自营</div>
                <div class="hmzy-box">
                    <img src="../../img/hmzyImg.png" alt=""/>
                    <div class="hmzy-other">
                        <a class="hmzy-href1" href="goodsList.html"><img src="../../img/hmzyN2.png" alt="" style="height: 100%"/></a>
                        <a class="hmzy-href2" href="goodsList.html"><img src="../../img/hmzyImg2.png" alt=""/></a>
                        <a class="hmzy-href3" href="goodsList.html"><img src="../../img/hmzyImg3.png" alt=""/></a>
                    </div>
                </div>
            </div>
            <div class="cnxh">
                <div class="cnxh-tit">
                    <img src="../../img/cainixihuan.png" alt=""/>
                </div>
                <div class="cnxh-item">
                    <div class="cnxh-list" v-for="goods in goods" @click="location.href='../productDetail/detail.html?goodsId='+goods.goodsId">
                        <img :src="imgUrl+goods.goodsImg" alt=""/>
                        <div class="cnxh-list-name">
                            <i class="ziying">自营</i>
                            {{goods.goodsName}}
                        </div>
                        <div class="cnxh-list-money">
                            &yen;{{goods.shopPrice}}
                        </div>
                    </div>
                    <!--<div class="cnxh-list">
                        <img src="../../img/indexGoods2.png" alt=""/>
                        <div class="cnxh-list-name">
                            <i class="ziying">自营</i>
                            文字文字文字文字文字文字
                        </div>
                        <div class="cnxh-list-money">
                            &yen;1099
                        </div>
                    </div>
                    <div class="cnxh-list">
                        <img src="../../img/indexGoods2.png" alt=""/>
                        <div class="cnxh-list-name">
                            <i class="ziying">自营</i>
                            文字文字文字文字文字文字
                        </div>
                        <div class="cnxh-list-money">
                            &yen;1099
                        </div>
                    </div>-->
                </div>
                <div class="loading">
                    <img src="../../img/footerIcon1.png" alt=""/>
                    <span>上拉加载更多</span>
                </div>
            </div>
        </section>

        <div class="footer"></div>

        <div class="sreach-result">
            <div class="cnxh">
                <div class="cnxh-item">
                    <div class="cnxh-list" v-for="goods in result">
                        <img :src="'http://zzhtwl.oss-cn-qingdao.aliyuncs.com/'+goods.goodsImg" alt=""/>
                        <div class="cnxh-list-name">
                            <i class="ziying">自营</i>
                            {{goods.goodsName}}
                        </div>
                        <div class="cnxh-list-money">
                            &yen;{{goods.shopPrice}}
                        </div>
                    </div>
                    <!--<div class="cnxh-list">
                        <img src="../../img/indexGoods2.png" alt=""/>
                        <div class="cnxh-list-name">
                            <i class="ziying">自营</i>
                            文字文字文字文字文字文字
                        </div>
                        <div class="cnxh-list-money">
                            &yen;1099
                        </div>
                    </div>
                    <div class="cnxh-list">
                        <img src="../../img/indexGoods2.png" alt=""/>
                        <div class="cnxh-list-name">
                            <i class="ziying">自营</i>
                            文字文字文字文字文字文字
                        </div>
                        <div class="cnxh-list-money">
                            &yen;1099
                        </div>
                    </div>-->
                </div>
                <div class="loading">
                    <img src="../../img/footerIcon1.png" alt=""/>
                    <span>上拉加载更多</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>